<template lang="pug">
el-dialog(
  :visible.sync="show"
  width="1080px"
  @open="beforeOpen"
  :before-close="handleClose"
  :close-on-click-modal="false"
  custom-class="material-modal"
)
  .modal-title(slot="title") 添加材料
  .modal-body
    .table-filter
      .table-filter-item
        .filter-item-label 材料名称：
        .filter-item-bd
          el-input(placeholder="请输入材料名称" v-model="form.materialName" size="small")
      .table-filter-item
        .filter-item-label 品牌：
        .filter-item-bd
          el-select(placeholder="请输入材料名称" v-model="form.brandId" size="small")
            el-option(v-for="item in brands", :label="item.name", :value="item.brandId")
      .table-filter-item
        el-button(type="primary" size="small" @click="search") 查询
        el-button(size="small" @click="reset") 重置
    .table-body
      el-table(
        :header-cell-style="{ fontSize: '14px', color: '#363636' }"
        style="width: 100%"
        max-height="400"
        :data="list"
        v-loading="loading"
        empty-text="未找到符合条件的内容"
        @selection-change="changeSelect"
      )
        el-table-column(type="selection" width="55" align="center")
        el-table-column(label="材料信息" prop="materialName")
        el-table-column(label="品牌名称" prop="brandName")
        el-table-column(label="产地" prop="")
        el-table-column(label="价格" prop="")
          template(slot-scope="scope")
            .table-item ¥{{scope.row.minFinalPrice + '~' + scope.row.maxFinalPrice}}
    .table-pagination
      .pagination-total 共 {{total}} 条
      .pagination-sizes 10 条/页
      el-pagination(
        background
        layout="prev, pager, next, jumper"
        :total="total"
        :page-size="pageSize"
        :current-page="page"
        @current-change="currentChange"
      )
  .modal-footer(slot="footer")
    el-button(type="primary" size="small" @click="save") 保存
</template>

<script>
import { loadSupplierBrands, getMaterialList } from 'api'
export default {
  name: 'selectMaterialModal',
  props: {
    show: Boolean,
    item: Object,
    selectIds: Array
  },
  data () {
    return {
      form: {
        materialName: '',
        brandId: ''
      },
      loading: false,
      list: [],
      brands: [],
      total: 0,
      page: 1,
      pageSize: 10,
      sections: []
    }
  },
  methods: {
    async getBrands () {
      try {
        const { ResultSet } = await this.$axios.post(loadSupplierBrands)
        this.brands = ResultSet.userData.brandList
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async getList () {
      try {
        this.loading = true
        let query = {
          isOnSales: 1,
          currentPage: this.page,
          pageLines: this.pageSize
        }
        if (this.form.materialName) query.materialName = this.form.materialName
        if (this.form.brandId) query.brandId = this.form.brandId
        if (this.selectIds.length) query.materialList = this.selectIds.join(',')
        const { ResultSet } = await this.$axios.post(getMaterialList, { content: { ...query } })
        this.list = ResultSet.userData.materialList
        this.total = ResultSet.recordNumber
        this.loading = false
      } catch (err) {
        this.loading = false
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    search () {
      this.getList()
    },
    reset () {
      this.form = {
        materialName: '',
        brandId: ''
      }
      this.getList()
    },
    currentChange (value) {
      this.page = value
      this.getList()
    },
    changeSelect (section) {
      this.sections = section
    },
    beforeOpen () {
      this.form = {
        materialName: '',
        brandId: ''
      }
      this.list = []
      this.getBrands()
      this.getList()
    },
    save () {
      if (!this.sections.length) {
        this.$message.error('请先选择要添加的素材！')
        return
      }
      let materialsList = this.sections.map(item => {
        return {
          materialName: item.materialName,
          materialId: item.materialId
        }
      })
      let item = { ...this.item }
      item.materialsList = [ ...item.materialsList, ...materialsList ] 
      this.$emit('confirm', item)
    },
    handleClose () {
      this.$emit('close')
    }
  }
} 
</script>

<style type="text/css" lang="scss">
.material-modal {
  .el-dialog__header {
    background: #F3F3F3;
  }
}
</style>

<style lang="scss" scoped>
.table-filter {
  display: flex;
  align-items: center;
}
.table-filter-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.table-body {
  margin-top: 20px;
}
.table-pagination {
  margin-top: 24px;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px;
  color: #7A7A7A;
  .pagination-total {
    margin-right: 10px;
  }
  .pagination-sizes {
    margin-right: 10px;
  }
}
</style>
